<template>
	<view class="">
		<!-- 如果当前routeObj有子节点 -->
		<template v-if="routeObj.children && routeObj.children.length > 0">
		 <view class="navTabItem hasChildren" :style="{'height':(routeObj.isOpen || routeObj.level==0) ?'30rpx':'0'}" @tap="openMenu(routeObj)">
		 	<text>{{routeObj.name}}</text>
		 </view>
		<!-- 递归调用自身 -->
			<navTreeItem :routeObj='item' v-for="(item,index) in routeObj.children" :key="item.id"></navTreeItem>
		</template>
		<!-- 不含子节点 -->
		<view v-if="!routeObj.children || routeObj.children.length == 0" >
			<view class="navTabItem" :style="{'height':(routeObj.isOpen || routeObj.level==0) ? '30rpx':'0'}" @tap="openMenu(routeObj)">
				<text>{{routeObj.name}}</text>
			</view>
			
		</view>
	</view>
</template>

<script>
	import navTreeItem from './navTreeItem.vue'
	export default{
		name:"navTreeItem",
		props:{
			routeObj:{
				type:Object,
				default:()=>{return {}}
			}
		},
		data(){
			return{}
		},
		methods:{
			openMenu(routeObj){
				if(routeObj.children && routeObj.children.length > 0){
					routeObj.children.forEach((item)=>{
						item.isOpen = true
					})
				}
			}
		}
	}
</script>

<style scoped>
.hasChildren{
	
}
.navTabItem{
	overflow: hidden;
	transition: .3s;
}
</style>
